<template>
    <el-input v-model="model.keyword" :placeholder="model.placeholder" >
        <template #prepend>
            <el-select v-model="model.select" placeholder="Select" style="width: 85px;">
                <el-option 
                    v-for="item in model.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
        </template>
        <template #append>
            <el-button :icon="Search" @click="model.search" ></el-button>
        </template>       
    </el-input>
</template>

<script setup>
/*
import { defineProps,computed,defineEmits } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    }
})
const emit = defineEmits(['update:modelValue'])
const model = computed({
    get(){
        // return props.modelValue        
        return new Proxy(props.modelValue,{
            get(target,key,receiver){
                return Reflect.get(target,key,receiver)
            },
            set(target,key,val) {
                console.log('set',key,val);
                emit('update:modelValue',{
                    ...target,
                    [key]:val
                })
                return true;
            }
        })
    } ,
    set(val){
        console.log('set',val)
        emit('update:modelValue',val)
    }
})
*/
// model.value = {}
// 基于以上可以抽离一个公共函数里去
import { defineProps,defineEmits } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useVModel } from '@/hooks/useVModel'
console.log("useVModel")
console.log(useVModel)
const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    }
})
const emit = defineEmits(['update:modelValue'])
const model = useVModel(props,'modelValue', emit)
</script>
<style scoped>

.modal {
  display: block;
  width: 100%;
  height: 100%;   
}
</style>

